import React, { useEffect, useState } from 'react';
import './label.scss'
import { Select, Input,Table,Button ,Switch,Drawer,Form,Radio} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../../api/tzp'
import {useNavigate } from 'react-router-dom'
import type { RadioChangeEvent } from 'antd';


interface DataType {
    key: string;
    id: string, 
    labelname: string,
    labelnum: number,
    labeltype:string,
    flag:number,
    time:string
}
function Label(props:any) {
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
      };
       //   请求用户列表
    var [tableData,setTableData] = useState<DataType[]>([])
    var label = async ()=>{
      var res = await service.label_list()
      console.log(res);
      setTableData(res.data)
    }
    useEffect(()=>{
      label()
    },[])
    
     //表格列表的配置
  const columns: ColumnsType<DataType> = [
      {
          title: '标签名称', 
          dataIndex: 'labelname', 
          key: 'labelname',
          align: 'center',
          width:170,
          render: ( _ ,record) => <div className='user'>{record.labelname}</div>,
      },
      {
          title: '用户数量', 
          key: 'labelnum',
          align: 'center',

          render: ( _ ,record) => <div >{record.labelnum}</div>,
      },
      {
          title: '标签类型', 
          key: 'labeltype',
          align: 'center',
          render: ( _ ,record) => <div >{record.labeltype}</div>,//动态渲染标签/组件
      },
      {
          title: '标签条件', 
          key: 'tiaojian',
          align: 'center',
          render: ( _ ,record) => <div style={{color:'blue'}}>查看</div>,//动态渲染标签/组件
      },
      {
          title: '标签状态', 
          dataIndex: 'flag', //数据索引( 属性名 )
          key: 'flag',
          align: 'center',
          render: (text, record) => <Switch defaultChecked={text} />
  
      },
      {
          title: '最后修改时间', 
          key: 'time',
          align: 'center',
          render: ( _ ,record) => <div >{record.time}</div>,//动态渲染标签/组件
      },
      {
          title: '操作',
          key: 'tip',
          align: 'center',
          render: ( _ ,record ) => {
              return <>
                  <Button  style={{color:'blue'}} onClick={()=>{labels(record)}}>编辑</Button>
                  <Button  style={{color:'blue'}} onClick={()=>{del(record.id)}}>删除</Button>
              </>
          },
      },
  ]
  
  let Navigate = useNavigate()
  var add =()=>{
    Navigate('/index/addlabel')
  }
  // 输入框内容
  var [inputText,setinputText] = useState('')
  var intchange = (e:any)=>{
      console.log(e.target.value);
      setinputText(e.target.value)
  }
  var searchlabel = async()=>{
    var ok = await service.search_label({labelname_like:inputText})
    console.log(ok);
    setTableData(ok.data)
  }
  var del =async (id:any)=>{
    console.log(id);
    var res = await service.delete_label({id:id})
    console.log(res);
    var res1 = await service.label_list()
    setTableData(res1.data)
  }
  var [open, setOpen] = useState<boolean>(false);
  var [form] = Form.useForm()
//   编辑
  var labels = (record:any)=>{
    setOpen(true);

  }
  var onClose = () => {
    setOpen(false);
    form.setFieldsValue({ adminid: '', adminname: '', role: '', password: '', checkedKeys: '[]' })
}
const [value, setValue] = useState('手动标签');

  const onChange = (e: RadioChangeEvent) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
//   提交
  var addlabel = async()=>{
    var data = new Date()
    var res = await service.add_label({labelname:text,labeltype:value,labelnum:'88',flag:1,time:data})
    console.log(res);
  }
  //   输入框数据
var [text ,setText] = useState('')
var inputtext =(e:any)=>{
    setText(e.target.value)
}
    return (
        <div className='label'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 用户标签</div>
                <div className='title-bottom'>用户标签</div>
            </div>
            <div className='label-search'>
                <div className='search-left'>
                    <div className='label-type'>
                        <span>标签类型</span>
                        <Select               
                            style={{ width: 180 }}
                            onChange={handleChange}
                            placeholder={'请选择标签类型'}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '手动标签', label: '手动标签' },
                                { value: '自动标签', label: '自动标签' },
                            ]}
                        />
                    </div>
                    <div className='label-name'>
                        <span>标签名称</span>
                        <Input placeholder="请输入" onChange={(e)=>{intchange(e)}} style={{width:200}}/>
                    </div>    
                </div>        
                <div className='search-right'>
                    <button onClick={()=>{searchlabel()}}>查询</button>
                    <button>重置</button>
                </div>        
            </div>
            <div className='label-list'>
                <div className='list_box'>
                    <div className='list-left'><div className="list-title">标签列表</div></div>
                    <div className='list-right'>
                        <button onClick={()=>{add()}}>新建</button>
                        <button>全部删除</button>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} style={{marginTop:20}} rowKey="id"/>

            </div>
            <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
                <div className="box_list">
                        <div className="input-box">
                            <span>标签名称</span>
                            <Input placeholder="请输入" style={{width:400}} onChange={(e)=>{inputtext(e)}}/>
                        </div>
                        <div className='label-type'>
                            <span className='txt'>标签类型</span>
                            <Radio.Group onChange={onChange} value={value} >
                                <Radio value={'手动标签'}>手动标签</Radio>
                                <Radio value={'自动标签'}>自动标签</Radio>
                            </Radio.Group>
                        </div>
                        <div className='btn'>
                            <button onClick={()=>{addlabel()}}>提交</button>
                        </div>
                </div>
            </Drawer>
        </div>
    );
}

export default Label;